.basic-style {
  color: if(style(--scheme: dark): #eeeeee;);
}

.basic-media {
  background-color: if(media(print): black;);
}

.basic-supports {
  color: if(supports(color: lch(7.1% 60.23 300.16)): lch(7.1% 60.23 300.16););
}

.with-else-style {
  font-size: if(style(--size: "2xl"): 1em; else: 0.25em;);
}

.with-else-media {
  margin: if(media(width < 700px): 0 auto; else: 20px auto;);
}

.with-else-supports {
  color: if(
    supports(color: lch(75% 0 0)): lch(75% 0 0);
    else: rgb(185 185 185);
  );
}

.multiple-conditions {
  background-image: if(
    style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);
    style(--scheme: fire): linear-gradient(#ffc971, white, #ffc971);
    else: none;
  );
}

.multiple-style-queries {
  color: if(
    style(--theme: dark): #000000;
    style(--theme: light): #ffffff;
    style(--theme: auto): #808080;
    else: inherit;
  );
}

.shorthand-border {
  border: 3px yellow if(
    style(--color: green): dashed;
    style(--color: yellow): inset;
    else: solid;
  );
}

.logical-or {
  color: if(style((--scheme: dark) or (--scheme: very-dark)): black;);
}

.logical-and {
  background: if(style((--scheme: dark) and (--contrast: hi)): black;);
}

.logical-not {
  color: if(not style(--scheme: light): black;);
}

.complex-logic {
  background: if(
    style((--theme: dark) and ((--contrast: high) or (--contrast: max))): #000;
    else: #fff;
  );
}

.media-range {
  margin: if(media(width < 700px): 0 auto; else: 20px auto;);
}

.media-print {
  background-color: if(media(print): white; else: #eeeeee;);
}

.media-complex {
  padding: if(
    media((width >= 1200px) and (orientation: landscape)): 2rem;
    media(width >= 768px): 1rem;
    else: 0.5rem;
  );
}

.supports-color {
  color: if(
    supports(color: lch(75% 0 0)): lch(75% 0 0);
    else: rgb(185 185 185);
  );
}

.supports-selector {
  margin-top: if(
    supports(selector(:buffering)): 1em;
    else: initial;
  );
}

.supports-property {
  display: if(
    supports(display: grid): grid;
    supports(display: flex): flex;
    else: block;
  );
}

.nested-simple {
  color: if(
    style(--mode: dynamic): if(
      style(--contrast: high): #000;
      else: #333;
    );
    else: #666;
  );
}

.nested-complex {
  background: if(
    media(width > 1024px): if(
      style(--theme: dark): linear-gradient(#000, #222);
      style(--theme: light): linear-gradient(#fff, #eee);
      else: gray;
    );
    else: if(
      style(--theme: dark): #000;
      else: #fff;
    );
  );
}

.with-calc {
  font-size: if(
    media(width > 700px): calc(3rem + 2vw);
    else: 3rem;
  );
}

.calc-with-if {
  width: calc(100% - if(media(width < 768px): 2rem; else: 4rem;));
}

.with-var {
  color: if(
    style(--scheme: dark): var(--color-dark);
    else: var(--color-light);
  );
}

.with-clamp {
  font-size: if(
    media(width > 1024px): clamp(1rem, 2vw, 3rem);
    else: clamp(0.875rem, 1.5vw, 1.5rem);
  );
}

.colors {
  color: if(style(--scheme: ice): #03045e; style(--scheme: fire): #621708; else: black;);
  background: if(style(--gradient: on): linear-gradient(45deg, red, blue); else: solid blue;);
}

.lengths {
  width: if(media(width < 768px): 100%; else: 75%;);
  height: if(style(--tall: true): 100vh; else: auto;);
  padding: if(media(print): 0; else: 1em 2em;);
}

.keywords {
  display: if(media(width < 600px): block; else: flex;);
  position: if(style(--sticky: true): sticky; else: static;);
}

.strings {
  content: if(
    style(--scheme: ice): "D ";
    style(--scheme: fire): "=% ";
    else: "";
  );
}

.numbers {
  opacity: if(style(--faded: true): 0.5; else: 1;);
  z-index: if(style(--priority: high): 100; else: 1;);
}

article {
  --color1: if(
    style(--scheme: ice): #03045e;
    style(--scheme: fire): #621708;
    else: black;
  );
  --color2: if(
    style(--scheme: ice): #caf0f8;
    style(--scheme: fire): #ffc971;
    else: white;
  );

  color: var(--color1);
  border: 3px solid var(--color1);
  background: var(--color2);
}

h1 {
  font-size: if(
    media(width > 700px): calc(3rem + 2vw);
    else: 3rem;
  );
}

h1::before {
  content: if(
    style(--scheme: ice): "D ";
    style(--scheme: fire): "=% ";
    else: "";
  );
}

.responsive-typography {
  font-size: if(
    media(width >= 1920px): clamp(1.25rem, 1.5vw, 2rem);
    media(width >= 1024px): clamp(1.125rem, 1.25vw, 1.5rem);
    media(width >= 768px): clamp(1rem, 1.1vw, 1.25rem);
    else: clamp(0.875rem, 3vw, 1rem);
  );

  line-height: if(
    style(--density: compact): 1.4;
    style(--density: comfortable): 1.6;
    else: 1.5;
  );
}

.spacing-system {
  --spacing-unit: if(
    media(width >= 1024px): 1rem;
    media(width >= 768px): 0.875rem;
    else: 0.75rem;
  );

  padding: if(
    style(--padding: none): 0;
    style(--padding: compact): calc(var(--spacing-unit) * 0.5);
    style(--padding: comfortable): calc(var(--spacing-unit) * 1);
    else: calc(var(--spacing-unit) * 1.5);
  );
}

.grid-layout {
  display: if(
    supports(display: grid): grid;
    supports(display: flex): flex;
    else: block;
  );

  grid-template-columns: if(
    media(width >= 1200px): repeat(4, 1fr);
    media(width >= 900px): repeat(3, 1fr);
    media(width >= 600px): repeat(2, 1fr);
    else: 1fr;
  );

  gap: if(
    media(width >= 1024px): 2rem;
    media(width >= 768px): 1.5rem;
    else: 1rem;
  );
}

.accessible-colors {
  --text-color: if(
    style((--theme: dark) and (--contrast: high)): #ffffff;
    style((--theme: dark) and (--contrast: normal)): #e0e0e0;
    style((--theme: light) and (--contrast: high)): #000000;
    style((--theme: light) and (--contrast: normal)): #333333;
    else: #000000;
  );

  --bg-color: if(
    style((--theme: dark) and (--contrast: high)): #000000;
    style((--theme: dark) and (--contrast: normal)): #1a1a1a;
    style((--theme: light) and (--contrast: high)): #ffffff;
    style((--theme: light) and (--contrast: normal)): #f5f5f5;
    else: #ffffff;
  );

  color: var(--text-color);
  background-color: var(--bg-color);
}

.animations {
  transition-duration: if(
    style(--motion: reduced): 0s;
    style(--motion: normal): 0.3s;
    else: 0.2s;
  );

  animation-name: if(
    style(--motion: reduced): none;
    else: fadeIn;
  );
}

.print-optimized {
  color: if(media(print): black; else: inherit;);
  background: if(media(print): white; else: var(--bg-color););
  padding: if(media(print): 0; else: 1rem;);
  box-shadow: if(media(print): none; else: 0 2px 4px rgba(0,0,0,0.1););
}

.complex-nested {
  width: calc(
    100% - if(
      media(width >= 1024px): if(
        style(--sidebar: visible): 300px;
        else: 0px;
      );
      else: if(
        style(--mobile-nav: open): 100%;
        else: 0px;
      );
    )
  );
}

.container-like {
  font-size: if(
    style(--container-size: large): clamp(1.25rem, 2vw, 2rem);
    style(--container-size: medium): clamp(1rem, 1.5vw, 1.5rem);
    style(--container-size: small): clamp(0.875rem, 1vw, 1rem);
    else: 1rem;
  );
}

.feature-chain {
  color: if(
    supports(color: oklch(0.5 0.2 180)): oklch(0.5 0.2 180);
    supports(color: lch(50% 50 180)): lch(50% 50 180);
    supports(color: lab(50% 20 -30)): lab(50% 20 -30);
    else: rgb(100, 150, 200);
  );
}

.deep-nesting {
  background: if(
    media(width >= 1920px): if(
      style(--quality: high): if(
        supports(background: image-set()): image-set(
          url('bg-4k.jpg') 1x,
          url('bg-8k.jpg') 2x
        );
        else: url('bg-4k.jpg');
      );
      else: if(
        style(--quality: medium): url('bg-hd.jpg');
        else: url('bg-sd.jpg');
      );
    );
    else: if(
      media(width >= 1024px): url('bg-hd.jpg');
      else: url('bg-sd.jpg');
    );
  );
}

.mixed-queries {
  padding: if(
    media(print): 0;
    supports(padding-inline: 1rem): if(
      style(--dir: rtl): 0 1rem 0 2rem;
      else: 0 2rem 0 1rem;
    );
    else: 0 2rem;
  );
}

.no-space {
  color: if(style(--test: val): red;);
}

.optional-semicolon-1 {
  color: if(style(--test: val): red; else: blue);
}

.optional-semicolon-2 {
  color: if(style(--test: val): red; else: blue;);
}

.whitespace {
  color: if(
    style(--test: val)  :  red  ;
    else  :  blue  ;
  );
}

.multiple-values {
  margin: if(
    media(width < 768px): 0 auto;
    else: 1rem 2rem 1.5rem 2.5rem;
  );
}

.special-chars {
  content: if(
    style(--icon: "check"): "";
    style(--icon: "cross"): "";
    style(--icon: "arrow"): "";
    else: "";
  );
}

.zero-values {
  margin: if(style(--no-margin: true): 0; else: 1rem;);
  padding: if(style(--no-padding: true): 0 0 0 0; else: 1em;);
}

.negative-values {
  margin-left: if(style(--pull-left: true): -2rem; else: 0;);
  transform: if(style(--flip: true): translateX(-100%); else: translateX(0););
}

div {
	background: if(
		style(--foo: bar) and style(--bar: baz): red;
		else: blue;
	);
}

.complex-logic {
	background: if(
		style(--foo: bar) and (style(--fiz: buzz) or style(--baz: qux)): red;
		else: blue;
	)
}
